<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="商品详情"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 共用轮播图组件 -->
            <common-swiper
                class="goods-swiper"
                :swiperList="goodsInfo.imgs"
                :swiperHeight="swiperHeight"
                :media="goodsInfo.media"
            ></common-swiper>
            <!-- 共用轮播图组件 -->

            <div class="goods-info">
                <div class="goods-name">{{goodsInfo.title}}</div>
                <div class="goods-detail">{{goodsInfo.title_sub}}</div>
                <div class="goods-price-box">
                    <span class="goods-now-price">{{activityInfo.member_count}}人团特享：{{activityInfo.price_master | currency}}</span>
                    <span class="goods-normal-price">￥{{goodsInfo.price_market | currency}}</span>
                </div>
                <div
                    class="share-btn"
                    @click="shareShow"
                >分享</div>
            </div>

            <div class="group-buy-time">
                <!-- <div class="sale-num">已拼 {{activityInfo.item_total}} 件</div> -->
                <div
                    class="group-time"
                    v-if="isBegin == true"
                >
                    剩余
                    <span v-show="remainDay>0">{{remainDay}}天</span>
                    <span class="time-label"><span v-show="remainHour<10">0</span>{{remainHour}}</span>
                    :
                    <span class="time-label"><span v-show="remainMinute<10">0</span>{{remainMinute}}</span>
                    :
                    <span class="time-label"><span v-show="remainSecond<10">0</span>{{remainSecond}}</span>
                    结束
                </div>
                <div
                    class="no-begin"
                    ref="groupTime"
                    v-else
                >{{'拼团活动将于' + activityInfo.begin_time + '开始'}}</div>
            </div>

            <div class="group-buy-rules">
                <div class="rules-title">
                    <span class="rules-title-name">拼团玩法</span>
                    <span
                        class="rules-more"
                        @click="goGroupDetail"
                    >规则详情<img
                            class="more"
                            src="@/assets/images/groupBuy/more-gray.png"
                        /></span>
                </div>
                <div class="rules-step-img">

                </div>
            </div>

            <div class="group-buy-box">
                <div class="group-buy-title">
                    <span class="group-buy-name"><span class="special-color">{{groupList.length}}</span>人在拼单，可直接参与</span>
                    <div
                        class="more"
                        @click="checkMoreGroup"
                    >查看全部<img src="@/assets/images/goodsDetail/more-1.png" /></div>
                </div>
                <div class="group-buy-list">
                    <div
                        class="group-buy-item"
                        v-for="(item,index) of groupList.slice(0, 3)"
                        :key="index"
                        @click="joinGroup(item.group_id)"
                    >
                        <img
                            class="item-header-img"
                            :src="item.face"
                        />
                        <!-- <div class="item-name">{{item.nick_name}}</div> -->
                        <div class="item-info">
                            <div class="item-tips">还差<span class="special-color">{{activityInfo.member_count-item.members}}</span>人成团</div>
                            <remain-time
                                class="item-times"
                                fontStyle="font-size:.32rem;color:#666;"
                                :stopTime="item.end_time"
                            ></remain-time>
                        </div>
                        <div class="go-group-buy">去参团</div>
                    </div>
                </div>
            </div>

            <!-- 商品评价组件 -->
            <goods-evaluate
                :commentList="commentList"
                :commentTotal="commentTotal"
                :goodsId="goodsInfo.id"
            ></goods-evaluate>
            <!-- 商品评价组件 -->

            <!-- 商品详情组件 -->
            <goods-details :goodsDetail="goodsInfo.content"></goods-details>
            <!-- 商品详情组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div class="go-buy-box">
            <div
                class="concat-btn"
                @click="goOnlineService"
            >联系客服</div>
            <div
                class="go-buy-btn"
                :class="isOverTime == true || isFullGroup == true || isBegin == false?'disabled':''"
                @click="goCreateGroup"
            >￥{{activityInfo.price_master | currency}} 发起拼团</div>
        </div>

        <div
            class="more-group-box"
            v-if="groupMore"
        >
            <div class="more-group-main">
                <img
                    class="close-btn"
                    src="@/assets/images/groupBuy/close-icon.png"
                    @click="groupMore = false"
                />
                <div class="more-group-top">加入拼团</div>
                <div class="more-group-list">
                    <div
                        class="more-group-item"
                        v-for="(item,index) of groupList"
                        :key="index"
                        @click="joinGroup(item.group_id)"
                    >
                        <img
                            class="item-header-img"
                            :src="item.face"
                        />
                        <!-- <div class="item-name">{{item.nick_name}}</div> -->
                        <div class="item-info">
                            <div class="item-group">还差<span class="special-color">{{activityInfo.member_count-item.members}}</span>人成团</div>
                            <remain-time
                                class="item-times"
                                fontStyle="font-size:.32rem;color:#666;"
                                :stopTime="item.end_time"
                            ></remain-time>
                        </div>
                        <div class="join-group-btn">去参团</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分享引导组件 -->
        <div
            class="share-bg"
            v-if="shareTips"
            @click.prevent.self="closeShare"
        >
            <div
                class="share-main"
                ref="imageWrapper"
            >
                <slot>
                    <img
                        class="share-main-bg"
                        src="@/assets/images/groupBuy/group-share-bg.jpg"
                    />
                    <div class="user-info-box">
                        <img
                            class="user-img"
                            :src="'data:image/png;base64,'+headerImgUrl"
                        />
                        <div class="user-info">
                            <div class="user-name-id">{{decodeURI(userInfo.nick_name)}} <span class="id-color">ID：{{userInfo.id}}</span></div>
                            <div class="user-tips">快来和我一起拼团</div>
                        </div>
                    </div>
                    <div class="share-img-box">
                        <img
                            class="share-img"
                            :src="'data:image/png;base64,'+shareImgUrl"
                            @load="imgLoad(1)"
                        />
                        <img
                            class="share-price-img"
                            src="@/assets/images/groupBuy/group-share-price.png"
                            @load="imgLoad(2)"
                        />
                        <div class="share-price">{{activityInfo.price_master/100}}</div>
                    </div>
                    <div class="qrcode-box">
                        <div
                            class="qrcode"
                            ref="qrCodeUrl"
                        ></div>
                    </div>
                </slot>
            </div>
            <div class="share-tips">长按图片可发送给好友一起参与~</div>
        </div>
        <div
            class="loading-bg"
            v-show="shareLoading"
        >
            <img
                class="loading-img"
                src="@/assets/images/home/loading.gif"
            />
            <div class="loading-tips">分享图片生成中...</div>
        </div>
        <!-- 分享引导组件 -->

        <!-- 绑定手机组件 -->
        <bind-phone
            :bindPhone="bindPhone"
            @closeBindPhone="closeBindPhone"
        ></bind-phone>
        <!-- 绑定手机组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import CommonSwiper from '@/components/Swiper'
import RemainTime from './components/RemainTime'
import GoodsEvaluate from '@/pages/GoodsDetail/components/GoodsEvaluate'
import GoodsDetails from '@/pages/GoodsDetail/components/GoodsDetails'
import BindPhone from '@/components/BindPhone'
import wx from 'weixin-js-sdk'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
export default {
    name: 'GroupDetail',
    components: {
        CommonHeader,
        CommonScroll,
        CommonSwiper,
        RemainTime,
        GoodsEvaluate,
        GoodsDetails,
        BindPhone
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem'
            },
            swiperHeight: '100%',
            activityInfo: '',
            goodsInfo: '',
            groupList: [],
            commentList: [],
            commentTotal: 0,
            remainDay: 0,
            remainHour: 0,
            remainMinute: 0,
            remainSecond: 0,
            groupMore: false,
            isOverTime: false,
            isFullGroup: false,
            isBegin: false,
            isCreateGroup: false,
            userInfo: '',
            bindPhone: false,
            shareTips: false,
            shareImgUrl: '',
            headerImgUrl: '',
            shareLoading: false,
            time: '',
            shareImgLoad: false,
            sharePriceLoad: false
        }
    },
    mounted() {
        this.getUserInfo()
        this.getActivityInfo()
        this.time = setInterval(this.getTime, 1000)
    },
    methods: {
        getWxConfig() {
            const that = this
            this.axios.post('/api/jsconfig.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    let routeHost = window.location.origin
                    let routeHref = window.location.href.split('#')[0]
                    let routePath = encodeURIComponent(
                        window.location.href.split('#')[1]
                    )
                    wx.config(data.data)
                    wx.ready(function() {
                        if (typeof wx.updateAppMessageShareData == 'function') {
                            wx.updateAppMessageShareData({
                                title:
                                    '百领商城三人团：' + that.goodsInfo.title, // 分享标题
                                desc: that.goodsInfo.title_sub, // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.goodsInfo.imgs[0].title_img, // 分享图标
                                success: function() {
                                    // 设置成功
                                }
                            })
                        } else {
                            wx.onMenuShareAppMessage({
                                title:
                                    '百领商城三人团：' + that.goodsInfo.title, // 分享标题
                                desc: that.goodsInfo.title_sub, // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.goodsInfo.imgs[0].title_img, // 分享图标
                                type: '', // 分享类型,music、video或link，不填默认为link
                                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                success: function() {
                                    // 用户点击了分享后执行的回调函数
                                }
                            })
                        }
                        if (typeof wx.onMenuShareTimeline == 'function') {
                            wx.onMenuShareTimeline({
                                title:
                                    '百领商城三人团：' + that.goodsInfo.title, // 分享标题
                                desc: that.goodsInfo.title_sub, // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.goodsInfo.imgs[0].title_img, // 分享图标
                                success: function() {
                                    // 设置成功
                                }
                            })
                        } else {
                            wx.onMenuShareTimeline({
                                title:
                                    '百领商城三人团：' + that.goodsInfo.title, // 分享标题
                                desc: that.goodsInfo.title_sub, // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: that.goodsInfo.imgs[0].title_img, // 分享图标
                                success: function() {
                                    // 用户点击了分享后执行的回调函数
                                }
                            })
                        }
                    })
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            if (this.userInfo.face == '') {
                this.headerImgUrl = null
                return
            }
            this.toBase64(this.userInfo.face, 'headerImgUrl')
            this.getEasemobimConfig()
        },
        getActivityInfo() {
            let postData = this.qs.stringify({
                id: this.$route.query.groupsId
            })
            this.axios
                .post('/api/group_buy/activity_info.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.activityInfo = data.data.activity
                        this.goodsInfo = data.data.goods
                        this.groupList = data.data.group_list
                        if (
                            parseInt(this.activityInfo.group_total) >=
                            parseInt(this.activityInfo.max_group_count)
                        ) {
                            this.isFullGroup = true
                        }
                        this.toBase64(
                            this.goodsInfo.imgs[0].title_img,
                            'shareImgUrl'
                        )
                        this.getWxConfig()
                        let postData = this.qs.stringify({
                            goods_id: this.goodsInfo.id,
                            page_size: 5,
                            page: 1
                        })
                        this.axios
                            .post('/api/goods/comment_list.json', postData)
                            .then(res => {
                                const data = res.data
                                if (data.status == 1) {
                                    this.commentList = data.data.list
                                    this.commentTotal =
                                        data.data.page_info.total
                                } else {
                                    this.commonDialog.alert('提示', data.msg)
                                }
                            })
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        getEasemobimConfig() {
            window.easemobim = window.easemobim || {}
            easemobim.config = {
                hide: true,
                autoConnect: true,
                hideKeyboard: true,
                visitor: {
                    trueName: this.userInfo.nick_name,
                    phone: this.userInfo.mobile_phone,
                    userNickname: this.userInfo.id
                }
            }
        },
        getTime() {
            let today = new Date(), //当前时间
                h = today.getHours(),
                m = today.getMinutes(),
                s = today.getSeconds()
            let beginTime = new Date(
                this.activityInfo.begin_time.replace(/-/g, '/')
            ) //开始时间
            let stopTime = new Date(
                    this.activityInfo.end_time.replace(/-/g, '/')
                ), //结束时间
                stopH = stopTime.getHours(),
                stopM = stopTime.getMinutes(),
                stopS = stopTime.getSeconds()
            let remainTime = stopTime.getTime() - today.getTime()
            if (today.getTime() < beginTime.getTime()) {
                return
            }
            if (remainTime < 0) {
                this.$refs.groupTime.innerHTML = '已结束'
                this.isOverTime = true
                clearInterval(this.time)
                return
            }
            this.isBegin = true
            this.remainDay = parseInt(remainTime / (60 * 60 * 24 * 1000)) //转换为天
            let remainTimeD =
                parseInt(remainTime) -
                parseInt(this.remainDay * 60 * 60 * 24 * 1000) //除去天的毫秒数
            this.remainHour = parseInt(remainTimeD / (60 * 60 * 1000)) //除去天的毫秒数转换成小时
            let remainTimeH = remainTimeD - this.remainHour * 60 * 60 * 1000 //除去天、小时的毫秒数
            this.remainMinute = parseInt(remainTimeH / (60 * 1000)) //除去天的毫秒数转换成分钟
            let remainTimeM = remainTimeH - this.remainMinute * 60 * 1000 //除去天、小时、分的毫秒数
            this.remainSecond = parseInt(
                (remainTime -
                    this.remainDay * 60 * 60 * 24 * 1000 -
                    this.remainHour * 60 * 60 * 1000 -
                    this.remainMinute * 60 * 1000) /
                    1000
            ) //除去天、小时、分的毫秒数转化为秒
        },
        checkMoreGroup() {
            if (this.groupList.length == 0) {
                this.commonDialog.alert(
                    '提示',
                    '还没有人开团哟，请前往发起拼团'
                )
                return
            }
            this.groupMore = true
        },
        goGroupDetail() {
            this.$router.push('/groupRules')
        },
        goOnlineService() {
            easemobim.bind({ configId: 'c490fa9c-6496-48ea-992a-667f779852ae' })
        },
        goCreateGroup() {
            const that = this
            if (this.isOverTime) {
                this.commonDialog.alert('提示', '拼团活动已结束')
                return
            }
            if (this.isFullGroup) {
                this.commonDialog.alert('提示', '暂无开团名额')
                return
            }
            if (
                this.userInfo.mobile_phone == '' ||
                this.userInfo.mobile_phone == null
            ) {
                this.bindPhone = true
                return
            }
            if (this.isCreateGroup) {
                this.commonDialog.alert('提示', '请勿重复提交')
                return
            }
            this.isCreateGroup = true
            let postData = this.qs.stringify({
                activity_id: this.$route.query.groupsId
            })
            this.axios
                .post('/api/group_buy/create_group.json', postData)
                .then(res => {
                    this.isCreateGroup = false
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '恭喜您，开团成功',
                            function() {
                                that.$router.push({
                                    path: '/joinGroup',
                                    query: { groupId: data.data.id }
                                })
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        joinGroup(id) {
            this.$router.push({
                path: '/joinGroup',
                query: { groupId: id }
            })
        },
        closeBindPhone() {
            this.bindPhone = false
        },
        imgLoad(value) {
            if (value == 1) {
                this.shareImgLoad = true
                if (this.sharePriceLoad == true) {
                    this.toImage()
                }
            } else if (value == 2) {
                this.sharePriceLoad = true
                if (this.shareImgLoad == true) {
                    this.toImage()
                }
            }
        },
        shareShow() {
            this.shareLoading = true
            if (this.shareImgUrl == '' || this.headerImgUrl == '') {
                setTimeout(this.shareShow, 500)
            } else {
                const that = this
                this.shareTips = true
                this.$nextTick(() => {
                    that.makeCode()
                })
            }
        },
        makeCode() {
            let routeHref = window.location.href
            let qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: routeHref,
                width: 85,
                height: 85,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        },
        toImage() {
            const that = this
            html2canvas(this.$refs.imageWrapper, {
                backgroundColor: null
            }).then(canvas => {
                let dataURL = canvas.toDataURL('image/png')
                document.querySelector('.share-main').innerHTML =
                    '<img width="100%" src="' + dataURL + '" />'
                setTimeout(() => {
                    that.shareLoading = false
                }, 1000)
            })
        },
        toBase64(url, target) {
            let postData = this.qs.stringify({
                url: url
            })
            this.axios.post('/api/img/base64.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this[target] = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        closeShare() {
            this.shareTips = false
            this.shareImgLoad = false
            this.sharePriceLoad = false
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.group-buy-time
    display flex
    justify-content space-between
    align-items center
    height 1.14rem
    padding 0 0.32rem
    background #d7463c
    font-size 0.32rem
    color #fff
    .group-time, .no-begin
        display flex
        align-items center
        .time-label
            display block
            margin 0 0.2rem
            width 0.8rem
            padding 0.1rem 0
            text-align center
            line-height 1
            background #fff
            font-size 0.32rem
            color #d7463c
            border-radius 2px
.goods-info
    position relative
    padding 0.32rem 1.73rem 0.32rem 0.32rem
    background #fff
    border-top 1px solid #e5e5e5
    .goods-name
        font-size 0.39rem
        color #333
        line-height 1.3
    .goods-detail
        margin-top 0.13rem
        font-size 0.3rem
        color #666
        line-height 1.3
    .goods-price-box
        display flex
        align-items baseline
        margin-top 0.3rem
        .goods-now-price
            font-size 0.4rem
            color #d7463c
        .goods-normal-price
            margin-left 0.26rem
            font-size 0.32rem
            color #999
            text-decoration line-through
    .share-btn
        position absolute
        top 1.14rem
        right 0
        width 1.36rem
        height 0.55rem
        line-height 0.55rem
        background #d7463c
        border-radius 30px 0 0 30px
        text-align center
        font-size 0.33rem
        color #fff
.group-buy-rules
    margin-top 0.18rem
    background #fff
    .rules-title
        display flex
        align-items center
        justify-content space-between
        height 1.13rem
        padding 0 0.32rem
        border-bottom 1px solid #e5e5e5
        .rules-title-name
            font-size 0.32rem
        .rules-more
            font-size 0.32rem
            color #999
            .more
                width 0.2rem
                height 0.33rem
                margin-left 0.1rem
                vertical-align bottom
.group-buy-box
    margin-top 0.18rem
    background #fff
    .group-buy-title
        display flex
        align-items center
        justify-content space-between
        height 1.11rem
        padding 0 0.33rem
        border-bottom 1px solid #e5e5e5
        .group-buy-name
            font-size 0.33rem
            color #333
            .special-color
                color #d7463c
        .more
            font-size 0.33rem
            color #d7463c
            img
                width 0.2rem
                height 0.33rem
                margin-left 0.1rem
                vertical-align bottom
    .group-buy-item
        display flex
        align-items center
        height 1.97rem
        padding 0 0.34rem
        border-bottom 1px solid #e5e5e5
        .item-header-img
            width 1.12rem
            height 1.12rem
            border-radius 100%
        .item-name
            font-size 0.39rem
            color #333
            margin-left 0.37rem
        .item-info
            flex 1
            min-width 1px
            padding 0 0.32rem
            text-align right
            .item-tips
                font-size 0.32rem
                color #333
                .special-color
                    color #d7463c
            .item-times
                margin-top 0.21rem
        .go-group-buy
            width 1.81rem
            line-height 0.73rem
            text-align center
            font-size 0.37rem
            color #fff
            background #d7463c
            border-radius 2px
.go-buy-box
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    display flex
    .concat-btn
        flex 1
        background #de5a24
        text-align center
        font-size 0.37rem
        color #fff
        line-height 1.33rem
    .go-buy-btn
        flex 1
        background #d7463c
        text-align center
        font-size 0.37rem
        color #fff
        line-height 1.33rem
    .disabled
        background #ededed
.more-group-box
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0, 0, 0, 0.7)
    z-index 2
    display flex
    flex-direction column
    align-items center
    justify-content center
    .more-group-main
        position relative
        width 8.11rem
        max-height 9rem
        background #fff
        border-radius 5px
        overflow hidden
        .close-btn
            position absolute
            top 0.34rem
            right 0.34rem
            width 0.37rem
            height 0.37rem
        .more-group-top
            line-height 1.06rem
            text-align center
            font-size 0.43rem
            color #333
            border-bottom 1px solid #e5e5e5
            box-sizing border-box
        .more-group-list
            max-height 7.94rem
            overflow-y scroll
            -webkit-overflow-scrolling touch
            .more-group-item
                display flex
                align-items center
                height 1.59rem
                padding 0 0.53rem
                border-bottom 1px solid #e5e5e5
                .item-header-img
                    width 1.04rem
                    height 1.04rem
                    border-radius 100%
                .item-info
                    flex 1
                    min-width 1px
                    padding 0 0.26rem
                    text-align right
                    .item-name
                        font-size 0.32rem
                        color #333
                    .item-group
                        font-size 0.32rem
                        color #333
                        .special-color
                            color #d7463c
                    .item-times
                        margin-top 0.1rem
                .join-group-btn
                    width 1.25rem
                    line-height 0.44rem
                    text-align center
                    background #d7463c
                    font-size 0.32rem
                    color #fff
                    border-radius 2px
.loading-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    padding 5% 10%
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    display flex
    flex-direction column
    align-items center
    justify-content center
    .loading-img
        width 1rem
        height 1rem
    .loading-tips
        width 100%
        margin-top 0.37rem
        font-size 0.38rem
        color #fff
        text-align center
.share-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    display flex
    flex-direction column
    justify-content center
    align-items center
    .share-main
        position relative
        width 300px
        height 501px
        .share-img
            display block
            width 300px
            margin 0 auto
        .share-main-bg
            position absolute
            top 0
            left 0
            width 300px
            height 501px
        .user-info-box
            position absolute
            top 20px
            left 0
            right 70px
            display flex
            align-items center
            padding 0 15px
            .user-img
                width 50px
                height 50px
                border-radius 100%
            .user-info
                flex 1
                margin-left 10px
                .user-name-id
                    font-size 12px
                    color #333
                    .id-color
                        margin-left 10px
                        color #999
                .user-tips
                    margin-top 5px
                    font-size 14px
                    font-weight bold
                    color #ab2023
        .share-img-box
            position absolute
            top 80px
            left 0
            right 0
            text-align center
            .share-img
                width 270px
                height 270px
            .share-price-img
                position absolute
                bottom 0
                left 24px
                width 115px
            .share-price
                position absolute
                bottom 30px
                left 24px
                width 115px
                text-align center
                font-size 38px
                color #fff
        .qrcode-box
            position absolute
            bottom 35px
            right 20px
            width 85px
            height 85px
    .share-tips
        margin-top 0.37rem
        text-align center
        font-size 0.38rem
        color #fff
    .close-btn
        width 1rem
        height 1rem
</style>


